import Taro, { Component } from '@tarojs/taro'
import { View, Block, Navigator, Text, Image } from '@tarojs/components'

import { MoreFormid } from './../index'
import './tabbar.less'

class Tabbar extends Component {

    constructor(props) {
        super(props)
        this.state = {
            tabBarBusiness: {
                "color": "#666666",
                "selectedColor": "#333333",
                "backgroundColor": "rgba(255,255,255,1)",
                "borderStyle": "#ccc",
                "list": [
                    {
                        "pagePath": "/pages/business/index/index",
                        "text": "简历",
                        "iconPath": "https://file.open.banchengyun.com/353/c336ff0bb285893289d358b3b8c6196f",
                        "selectedColor": "#333333",
                        "clas": "menu-item",
                        "currentPage": "businessResume",
                        "active": false
                    },
                    {
                        "pagePath": "/pages/business/resumer/resumer",
                        "text": "找人才",
                        "iconPath": "https://file.open.banchengyun.com/353/89c30b560d37f3c27431fe74ad5efcb5",
                        "selectedColor": "#333333",
                        "clas": "menu-item",
                        "currentPage": "businessResumeAll",
                        "active": false
                    },
                    {
                        "pagePath": "/pages/business/my/my",
                        "text": "我的",
                        "iconPath": "https://file.open.banchengyun.com/353/e5625f40be2d0d2a703792b7b91eda9c",
                        "selectedColor": "#333333",
                        "clas": "menu-item",
                        "currentPage": "businessMy",
                        "active": false
                    }
                ],
                "position": "bottom"
            },
            tabBarConsumer: {
                "color": "#666666",
                "selectedColor": "#333333",
                "backgroundColor": "rgba(255,255,255,1)",
                "borderStyle": "#ccc",
                "list": [
                    {
                        "pagePath": "/pages/consumer/index/index",
                        "text": "职位",
                        "iconPath": "https://file.open.banchengyun.com/353/c1238bdbf5550a3fe86de2a753776b76",
                        "selectedColor": "#333333",
                        "clas": "menu-item",
                        "currentPage": "consumerResume",
                        "active": false
                    },
                    // {
                    //     "pagePath": "/pages/consumer/discover/discover",
                    //     "text": "发现",
                    //     "iconPath": "https://file.open.banchengyun.com/353/7525cd5cd2fe55eed5ff2dfc8ca3be60",
                    //     "selectedColor": "#333333",
                    //     "clas": "menu-item",
                    //     "currentPage": "consumerDiscover",
                    //     "active": false
                    // },
                    {
                        "pagePath": "/pages/consumer/my/my",
                        "text": "我的",
                        "iconPath": "https://file.open.banchengyun.com/353/c73e3e852de75edd51bb735483625117",
                        "selectedColor": "#333333",
                        "clas": "menu-item",
                        "currentPage": "consumerMy",
                        "active": false
                    }
                ],
                "position": "bottom"
            }
        }
    }

    componentWillReceiveProps(nextProps) {
    }

    componentDidMount() {
        const { currentPage } = this.props;
        if (currentPage.indexOf('business') > -1) {
            let tabBarBusiness = this.state.tabBarBusiness;
            for (let i = 0; i < tabBarBusiness.list.length; i++) {
                tabBarBusiness.list[i].active = false;
                tabBarBusiness.list[i].currentPage == currentPage && (tabBarBusiness.list[i].active = true);
            }
            this.setState({
                tabBarBusiness
            })
        } else if (currentPage.indexOf('consumer') > -1) {
            let tabBarConsumer = this.state.tabBarConsumer
            for (let i = 0; i < tabBarConsumer.list.length; i++) {
                tabBarConsumer.list[i].active = false;
                tabBarConsumer.list[i].currentPage == currentPage && (tabBarConsumer.list[i].active = true);
            }
            this.setState({
                tabBarConsumer
            })
        }
    }

    componentWillUnmount() { }

    componentDidShow() { }

    componentDidHide() { }

    toTabBar(url, nowCurrentPage, e) {
        let { currentPage } = this.props;
        if (currentPage != nowCurrentPage) {    //当前页不进行跳转
            Taro.redirectTo({
                url: url
            })
        }
    }

    render() {
        let tabBar = []
        this.props.currentPage.indexOf('business') > -1 ? (tabBar = this.state.tabBarBusiness) : (tabBar = this.state.tabBarConsumer)
        return (
            <View className='tabbar'>
                <View className='tab-bar' style={`color: ${tabBar.color}; background: ${tabBar.backgroundColor}; ${tabBar.position == 'top' ? 'top: 0' : 'bottom: 0'}; ${tabBar.borderStyle ? (tabBar.position == 'top' ? 'border-bottom: solid 1px ' + tabBar.borderStyle + ';' : 'border-top: solid 1px ' + tabBar.borderStyle + ';') : ''}`}>
                    {
                        tabBar.list.map((item, pagePath) =>
                            <View onClick={this.toTabBar.bind(this, item.pagePath, item.currentPage)} className={item.clas} style={`background-color: rgba(255,255,255,1);${item.active ? 'color: ' + (item.selectedColor ? item.selectedColor : tabBar.selectedColor) : ''};`}>
                                <View className='colorBlock' style={`${item.active && 'background:'+Taro.getStorageSync('baseColor')}`}><Image src={item.iconPath} className='imgTab' /></View>
                                <MoreFormid><View style='margin-top:3px' className='title'>{item.text}</View></MoreFormid>
                            </View>)
                    }
                    <View className='clear'></View>
                </View >
            </View >
        )
    }
}


export default Tabbar
